<div id="viewer-container"></div>
<script>
  CTS.ready(() => {
    let gui = new dat.GUI()
    let viewer = new CTS.Viewer('viewer-container') //初始化场景
    let modeloader = new CTS.ModelLoder(viewer)
    viewer.camera.position.set(0, 0, 2) //设置相机位置
    modeloader.loadModelToScene('resources/model/hello.glb') //加载模型
    const ambientLight = new CTS.AmbientLight(0xFFFFFF, 3)    //全局光
    viewer.scene.add(ambientLight)

    function updateControl() {
      for (let key in params) {
        viewer.controls[key] = params[key]
      }
    }

    let params = {
      enableRotate: true,
      enableZoom: true,
      enablePan: true,
      minDistance: 0,
      maxDistance: 9999,
      minPolarAngle: 0,
      maxPolarAngle: 3.14,
      minAzimuthAngle: -3.14,
      maxAzimuthAngle: 3.14
    }
    const folder1 = gui.addFolder('控制器配置')
    folder1.add(params, 'enableZoom').name('缩放').onChange(updateControl)
    folder1.add(params, 'enableRotate').name('旋转').onChange(updateControl)
    folder1.add(params, 'enablePan').name('平移').onChange(updateControl)
    folder1.add(params, 'minDistance').name('最小可移动').onChange(updateControl)
    folder1.add(params, 'maxDistance').name('最大可移动').onChange(updateControl)
    folder1.open()
    const folder2 = gui.addFolder('控制器旋转角')
    folder2.add(params, 'minPolarAngle', 0, 3.14).step(0.01).name('上下最小翻角').onChange(updateControl)
    folder2.add(params, 'maxPolarAngle', 0, 3.14).step(0.01).name('上下最大翻角').onChange(updateControl)
    folder2.add(params, 'minAzimuthAngle', -3.14, 0).step(0.01).name('左右最小翻角').onChange(updateControl)
    folder2.add(params, 'maxAzimuthAngle', 0, 3.14).step(0.01).name('左右最大翻角').onChange(updateControl)
    folder2.open()
    viewer.controlsEnabled = false
    viewer.renderer.domElement.addEventListener( 'mousedown', () => {
      viewer.renderer.domElement.requestPointerLock();
    } );
    viewer.renderer.domElement.addEventListener( 'mousemove', ( event ) => {
      console.log('sdadas')
      viewer.camera.rotation.y -= event.movementX / 500;
      viewer.camera.rotation.x -= event.movementY / 500;
    } );
  })
</script>
